<template>
  <div class="detailContainer">
    <div class="detail_header">
      <img :src="isMusicPlay? 'http://e.hiphotos.baidu.com/image/h%3D300/sign=a9e671b9a551f3dedcb2bf64a4eff0ec/4610b912c8fcc3cef70d70409845d688d53f20f7.jpg': detailObj.avatar" alt="">
      <img @tap="MusicPlayHandle" class="music_img" :src="isMusicPlay?'http://pic.51yuansu.com/pic2/cover/00/41/97/581373f0c847c_610.jpg' : 'http://pic.51yuansu.com/pic2/cover/00/39/82/5812fdd83f495_610.jpg'"/>
    </div>
    <div class="content">
      <div class="author">
        <img :src="detailObj.headImgSrc" alt="">
        <span class="upDateTime">{{detailObj.data}}</span>
      </div>
      <p class="info">{{detailObj.detail}}</p>
      <div class="line"></div>
      <div class="icon">
        <img
          @tap="colectedHandle"
          :src="isColected ? '/static/images/colected.jpg' : '/static/images/uncolected.jpg' "
          alt=""
        >
        <img src="/static/images/share.jpg" @tap="shareHandle" alt="">
      </div>
      <button class="zhuanfa" size="mini">转发此文章</button>
      <p class="author_content">{{detailObj.detail_content}}</p>
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex';
import isPlayObj from '../../datas/isPlay.js'
export default {
  data() {
    return {
      detailObj: {},
      isColected: false,
      isMusicPlay:false// 是否播放
    };
  },
  methods: {
    colectedHandle() {
      this.isColected = !this.isColected;
      let title = this.isColected ? "收藏成功" : "取消收藏";
      wx.showToast({
        title: title,
        icon: "success"
      });

      let wxStrorage = wx.getStorageSync('isColected');
      wxStrorage[this.index] = this.isColected;
      // 将本次设置的结果再缓存到本地
      wx.setStorage({
        key:'isColected',
        data:wxStrorage
      })
    },
    MusicPlayHandle(){
      this.isMusicPlay = !this.isMusicPlay;
      let {dataUrl, title} = this.detailObj.music;
      if(this.isMusicPlay){
        wx.playBackgroundAudio({
          dataUrl,
          title
        })
      }else {
        wx.pauseBackgroundAudio()
      }
    },
    shareHandle(){
      wx.showActionSheet({
        itemList: [
          "分享到微信好友",
          "分享到微信朋友圈",
          "分享到QQ好友"
        ], //按钮的文字数组，数组长度最大为6个,
        itemColor: '#000000', //按钮的文字颜色,
        success: res => {
          console.log(res)
        }
      });
    }
  },
  beforeMount() {
    // console.log(this.$mp.query)
    this.index = this.$mp.query.index;
    let wxStrorage = wx.getStorageSync("isColected");
    if (!wxStrorage) {
      wx.setStorage({
        key: "isColected",
        data: {}
      });
    } else {
      // 用户缓存过
      console.log(this.isColected);
      this.isColected = wxStrorage[this.index] ? true : false;
    }

    // 判断当前页面加载的时候音乐是否在播放
    isPlayObj.pageIndex === this.index && isPlayObj.isPlay ? this.isMusicPlay = true : this.isMusicPlay = false

    // 监听音乐的播放和暂停
    wx.onBackgroundAudioPlay(()=>{
      console.log('播放')
      this.isMusicPlay = true
      isPlayObj.pageIndex = this.index
      isPlayObj.isPlay = true
    })
    wx.onBackgroundAudioPause(()=>{
      console.log('暂停')
       this.isMusicPlay = false
       isPlayObj.isPlay = false
    })
  },
  mounted() {
    this.detailObj = this.$store.state.ListTemp[this.$mp.query.index];
    // console.log(this.ListTemp);
    console.log(this.$store.state.ListTemp[this.$mp.query.index])
    var pages =  getCurrentPages();
    console.log(pages)
    
  },
  onUnload(){
    wx.stopBackgroundAudio()
  },
  computed: {
    // ...mapState("listTemp")
    
    
  }
  
};
</script>

<style scoped>
.detail_header{
  position: relative;
}
.detail_header img {
  width:100%;
  vertical-align: middle;
}
.detail_header .music_img {
  width:60rpx;
  height:60rpx;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  border-radius:50%;
  opacity: 0.8;
}
.content {
  position: relative;
  margin-top: 30rpx;
}
.author img {
  width: 60rpx;
  height: 60rpx;
  vertical-align: middle;
  border-radius: 50%;
  margin-right: 20rpx;
}
.upDateTime {
  font-size: 24rpx;
}
.line {
  width: 90%;
  display: block;
  height: 2rpx;
  background-color: #ccc;
  margin: 30rpx auto;
}
.icon {
  position: absolute;
  top: 110rpx;
  right: 45rpx;
}
.icon img {
  width: 60rpx;
  height: 60rpx;
  margin: 0 15rpx;
}
.zhuanfa {
  display: block;
  width: 300rpx;
  margin: 0 auto;
}
.author_content {
  margin-top: 20rpx;
  text-indent: 2em;
}
</style>
